import React from 'react';
import { Form, Input, Button, DatePicker, Select, Space } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;
const { Option } = Select;

const SearchForm = ({ form, onSearch, onReset, levels = [] }) => {
  return (
    <Form
      form={form}
      layout="inline"
      onFinish={onSearch}
      style={{ marginBottom: 24 }}
    >
      <Form.Item name="keyword" label="关键词">
        <Input placeholder="会员ID/姓名/手机号/邮箱" style={{ width: 220 }} />
      </Form.Item>
      <Form.Item name="level" label="会员等级">
        <Select placeholder="请选择会员等级" style={{ width: 150 }} allowClear>
          {levels.map(level => (
            <Option key={level.id} value={level.code}>{level.name}</Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item name="status" label="状态">
        <Select placeholder="请选择状态" style={{ width: 150 }} allowClear>
          <Option value="active">正常</Option>
          <Option value="inactive">已禁用</Option>
        </Select>
      </Form.Item>
      <Form.Item name="dateRange" label="注册时间">
        <RangePicker style={{ width: 250 }} />
      </Form.Item>
      <Form.Item name="consumeTimeRange" label="最近消费">
        <RangePicker style={{ width: 250 }} />
      </Form.Item>
      <Form.Item name="balanceRange" label="账户余额">
        <Space>
          <Input placeholder="最小值" style={{ width: 100 }} />
          <Input placeholder="最大值" style={{ width: 100 }} />
        </Space>
      </Form.Item>
      <Form.Item name="pointsRange" label="积分范围">
        <Space>
          <Input placeholder="最小值" style={{ width: 100 }} />
          <Input placeholder="最大值" style={{ width: 100 }} />
        </Space>
      </Form.Item>
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
          <Button onClick={onReset} icon={<ReloadOutlined />}>
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default SearchForm;